// 头部导航
function navClick(element) {
    // 1. 先移除所有元素的active类名
    let navSpans = document.querySelectorAll('.nav-top span');
    navSpans.forEach(function (span) {
        span.classList.remove('active');
    });

    // 2. 给当前点击的span元素添加active类名
    element.classList.add('active');

    // 3. 获取所有相关内容区域的div元素
    let recomDiv = document.querySelector('.recom');
    let popularDiv = document.querySelector('.popular');
    let energyDiv = document.querySelector('.energy');

    // 4. 根据点击的不同元素进行对应操作
    if (element.textContent === "热门") {
        recomDiv.classList.remove('dsn');
        popularDiv.classList.add('dsn');
        energyDiv.classList.add('dsn');
        document.querySelector('.bab').style.background = "linear-gradient(to bottom, rgb(229, 193, 193), #fff)";
    } else if (element.textContent === "推荐") {
        popularDiv.classList.remove('dsn');
        recomDiv.classList.add('dsn');
        energyDiv.classList.add('dsn');
        document.querySelector('.bab').style.background = "linear-gradient(to bottom, rgb(193, 196, 229), #fff)";
    } else if (element.textContent === "新能源") {
        energyDiv.classList.remove('dsn');
        recomDiv.classList.add('dsn');
        popularDiv.classList.add('dsn');
        document.querySelector('.bab').style.background = "linear-gradient(to bottom, rgb(193, 220, 229), #fff)";
    }
}

// 轮播图
let swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

// 推荐渲染
const popular = new Vue({
    el: '.popular',
    data: {
        list: [],
        navList: [],
        swiperList: []
    },
    async created() {
        let navResponse = await axios.get('http://localhost:3888/popularNav');
        this.navList = navResponse.data;
        let swiperResponse = await axios.get('http://localhost:3888/swiper');
        this.swiperList = swiperResponse.data;
        let response = await axios.get('http://localhost:3888/essay');
        this.list = response.data;
    }
});

const recom = new Vue({
    el: '.recom',
    data: {
        list: [],
        navList: [],
        newsList: []
    },
    async created() {
        let navResponse = await axios.get('http://localhost:3888/recomNav');
        this.navList = navResponse.data;
        let newsResponse = await axios.get('http://localhost:3888/news');
        this.newsList = newsResponse.data;
        let response = await axios.get('http://localhost:3888/hot');
        this.list = response.data;
    }
});

const energy = new Vue({
    el: '.energy',
    data: {
        list: [],
        navList: [],
        hotList: {}
    },
    async created() {
        let response = await axios.get('http://localhost:3888/energy');
        this.list = response.data;
        let navResponse = await axios.get('http://localhost:3888/energyNav');
        this.navList = navResponse.data;
        let hotResponse = await axios.get('http://localhost:3888/energyHot');
        this.hotList = hotResponse.data;
    }
});



// 渲染
// let rendering = {
//     init() {
//         this.renderingInstances();
//     },
//     renderingInstances() {
//         const createVueInstances = [
//             { el: '.energy-content', url: 'http://localhost:3888/essay' },
//             { el: '.recommend', url: 'http://localhost:3888/hot' },
//             { el: '.energyend', url: 'http://localhost:3888/energy' },
//             { el: '.news-list', url: 'http://localhost:3888/hotList' }
//         ];
//         createVueInstances.forEach(({ el, url }) => {
//             new Vue({
//                 el,
//                 data: {
//                     list: []
//                 },
//                 async created() {
//                     let response = await axios.get(url);
//                     this.list = response.data;
//                 }
//             });
//         });
//     },
// }
// rendering.init();
